<template>
  <div class="extension-bonus-pool">
    <c-title :text="text"></c-title>
    <div class="head">
      <div class="center">
        <van-image width="3.4375rem" height="3.4375rem" :src="avatar" round lazy-load fit="cover"></van-image>
        <div>
          <div class="nickname">{{ nickname }}</div>
          <span class="member_id" v-if="uid">{{uid}}</span>
        </div>
      </div>
      <div class="flex column c-fff right">
        <span class="fz-32">{{ $i18n.t('money') }}{{ amounts }}</span><span>奖励总额</span>
      </div>
    </div>
    <van-tabs v-model="active" title-active-color="#F15353" @click="onClick">
      <van-tab title="奖励记录">
        <div class="box" v-for="item in list" :key="item.id">
          <div class="between">
            <span style="font-weight: 500;">奖励ID：{{item.id}}</span>
            <span style="color: #F15353 ;">+{{ item.amounts }}元</span>
          </div>
          <div class="line"></div>
          <div class="between">
            <span>{{item.created_at}}</span><span>奖励比例：{{item.rewards_ratio}}%</span>
          </div>
          <div style="text-align: left;margin-top: .7813rem;">推广量：{{item.order_nums}}单</div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Image } from "vant";
import { scrollMixin } from "../../../utils/mixin";
export default {
  components: {
    VanImage: Image
  },
  mixins: [scrollMixin],
  data() {
    return {
      active: 0,
      text: "",
      avatar: "",
      nickname: "",
      amounts: 0,
      page:1,
      total_page:1,
      list:[],
      isLoadMore:true,
    };
  },
  activated() {
    this.uid = localStorage.getItem("uid")||'';
    this.getData();
  },
  methods: {
    onClick(){
      this.getData();
    },
    getData(page=1) {
      $http.get("plugin.tx-bonus-pool.frontend.controllers.center",{page},'').then(({ result, msg, data }) => {
        if (result) {
          this.isLoadMore = true;
          let { plugin_name, avatar, amounts, nickname } = data.info;
          this.fun.setWXTitle(plugin_name);
          this.text = plugin_name;
          this.avatar = avatar;
          this.amounts = amounts;
          this.nickname = nickname;
          this.page = data.list.current_page;
          this.total_page = data.list.last_page;
          (page==1)?(this.list = data.list.data||[]):(this.list=this.list.concat(data.list.data));
        } else {
          this.$toast(msg);
        }
      })
    },
    getMoreData(){
      this.isLoadMore = false;
      if(this.page>=this.total_page){
        return;
      }
      let page = this.page+1;
      this.getData(page);
    },
  }
};
</script>

<style scoped lang="scss">
.extension-bonus-pool {
  padding-bottom: 1.5625rem;

  .nickname {
    font-size: 1rem;
    color: #FFFFFF;
    margin-left: .4063rem;
    margin-bottom: .4063rem;
  }

  .column {
    flex-direction: column;
  }

  .box {
    border-radius: .5rem;
    background: #fff;
    margin: .625rem .7813rem;
    padding: .8438rem .875rem .9375rem .6875rem;
    font-size: .8125rem;
  }

  .line {
    height: 1px;
    background: #F2F2F2;
    margin: 0.9375rem 0;
  }

  .c-fff {
    color: #fff;
  }

  .right {
    text-align: right;
  }

  .fz-32 {
    font-size: 1rem;
  }

  .member_id {
    color: #F15353;
    background: #fff;
    padding: 0.15rem .6rem;
    border-radius: .625rem;
    font-size: .6875rem;
    margin-left: 0.4063rem;
    margin-bottom: 0.4063rem;
  }

  .flex {
    display: flex;
  }

  .center {
    display: flex;
    align-items: center;
  }

  .between {

    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .head {
    background: #F15353;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.0625rem .625rem .9375rem 1.0313rem;
  }
}
</style>
